<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }
        .box {
            height: 300px;
            width: 500px;
            background-color: rgb(223, 198, 172);
            padding: 25px;
            margin: 20px auto;
        }
        form {
            height: 300px;
            width: 500px;
            background-color: aliceblue;
            display: flex;
            flex-direction: column;
        }
        input {
            height: 24px;
            width: 300px;
        }
        p {
            margin-left: 20px;
        }
        .btn {
            height: 30px;
            width: 200px;
            margin: 0 auto;
        }
    </style>
</head>
<body>
    <div class="box">
        <form action="#">
            <p>账号：<input name="username" type="text" style="margin-top: 20px;">&nbsp;&nbsp;<span></span></p><br>
            <p>密码：<input name="password" type="password">&nbsp;&nbsp;<span></span></p><br>
            <p>日期：<input name="date">&nbsp;&nbsp;<span></span></p><br>
            <p>邮箱：<input name="email">&nbsp;&nbsp;<span></span></p><br>
            <input type="submit" class="btn">
        </form>
        <script>
            const input = document.querySelectorAll("input")
            const span = document.querySelectorAll("span")

            let uFlag;
            let pFlag;
            let dFlag;
            let eFlag;

            input[0].addEventListener("change", function() {
                let value = this.value;
                let reg = /^[a-zA-Z\u4e00-\u9fa5]{1}[a-zA-Z0-9\u4e00-\u9fa5]{2,9}$/;
                uFlag = reg.test(value)
                let text = uFlag ? span[0].innerText = "通过" : span[0].innerText = "未通过"
                let color = uFlag ? span[0].style.color = "green" : span[0].style.color = "red"
            })

            input[1].addEventListener("change", function() {
                let value = this.value;
                let reg = /^\w{6,16}$/
                let reg1 = /[a-z]+/
                let reg2 = /[A-Z]+/
                let reg3 = /[0-9]+/
                let reg4 = /[\_]+/
                pFlag = reg.test(value)
                let n = Number(reg1.test(value))
                let m = Number(reg2.test(value))
                let i = Number(reg3.test(value))
                let j = Number(reg4.test(value))
                let text;
                let color;
                if (pFlag == true) {
                    if (n + m + i + j > 2) {
                        text = span[1].innerHTML = "通过，安全"
                        color = span[1].style.color = "green"
                    }
                    else if (n + m + i + j == 2) {
                        text = span[1].innerHTML = "通过，较安全"
                        color = span[1].style.color = "yellowgreen"
                    }
                    else if (n + m + i + j == 1) {
                        text = span[1].innerHTML = "通过，不安全"
                        color = span[1].style.color = "orange"
                    }
                } else {
                    text = span[1].innerHTML = "未通过"
                    color = span[1].style.color = "red"
                }
            })

            input[2].addEventListener("change", function() {
                let value = this.value;
                let reg = /^((199[0-9])|(200[0-9])|(201[0-9])|(20[2][0-5]))\/([1-9]|1[0-2])\/([1-9]|[1-2][0-9]|3[0-1])$/
                dFlag = reg.test(value)
                let text;
                let color;
                let arr = value.split("/")
                let year = arr[0]
                let moon = arr[1]
                let day = arr[2]
                let MM1 = [31, 29, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31]
                let MM2 = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31]
                console.log(year, moon, MM1[moon-1])
                if (dFlag == true) { 
                    if ((year % 4 == 0 && year % 100!= 0) || (year % 100 == 0 && year % 400 == 0)) {
                        if (MM1[moon - 1] >= day) {
                            text = span[2].innerHTML = "通过"
                            color = span[2].style.color = "green"
                        }
                        else {
                            text = span[2].innerHTML = "未通过"
                            color = span[2].style.color = "red"
                        }
                    }
                    else {
                        if (MM2[moon - 1] >= day) {
                            text = span[2].innerHTML = "通过"
                            color = span[2].style.color = "green"
                        }
                        else {
                            text = span[2].innerHTML = "未通过"
                            color = span[2].style.color = "red"
                        }
                    }
                } 
                else {
                    text = span[2].innerHTML = "未通过"
                    color = span[2].style.color = "red"
                }
            })

            input[3].addEventListener("change", function() {
                let value = this.value;
                let reg = /^[1-9]\d{4,10}@qq\.com$/
                eFlag = reg.test(value)
                let text = eFlag ? span[3].innerText = "通过" : span[3].innerText = "未通过"
                let color = eFlag ? span[3].style.color = "green" : span[3].style.color = "red"
            })

            input[4].addEventListener("click", function() {
                if (uFlag == true && pFlag == true && dFlag == true && eFlag == true) {
                    let obj = JSON.stringify({"账号":input[0].value, "密码":input[1].value, "日期":input[2].value ,"邮箱":input[3].value})
                    localStorage.setItem("用户信息", obj)
                    alert("注册成功，请返回登录")
                } else {
                    alert("注册失败，请重新注册")
                }
            })
            
        </script>
    </div>
</body>
</html>